/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableWithoutFeedback,
    StatusBar
} from 'react-native';

let self = null;

export default class NavBarView extends React.Component {

    static propTypes = {
        boxStyle: React.PropTypes.number,
        back: React.PropTypes.bool,
        host: React.PropTypes.object.isRequired,
        title: React.PropTypes.string,
        leftIcon: React.PropTypes.number,
        leftEvent: React.PropTypes.func,
        leftPoint: React.PropTypes.bool,
        rightIcon: React.PropTypes.number,
        rightEvent: React.PropTypes.func,
        rightPoint: React.PropTypes.bool,
        titleEvent: React.PropTypes.func,
        navRef: React.PropTypes.func,
        getTitleRef: React.PropTypes.func
    }

    static defaultProps = {
        back: true,
        rightPoint: false,
        leftPoint: false,
    }

    constructor(prop) {
        super(prop);
        self = this;
        this.state = {}
    }

    componentDidMount() {

    }

    render() {
        const host = this.props.host;
        return (
            <View ref="nav_bar" style={[styles.container, base.rowCC, this.props.boxStyle]}>
                <StatusBar barStyle={'light-content'}/>
                {
                    this.props.back ?
                        <TouchableWithoutFeedback onPress={() => host.props.navigation.goBack()}>
                            <View style={[base.rowCC, styles.btnBox]}>
                                <Image
                                    style={styles.btnIcon}
                                    source={require('../sources/icon_global_back.png')}
                                    resizeMode={'contain'}
                                >
                                    {
                                        this.props.leftPoint ? <View style={styles.point}/> : <View/>
                                    }
                                </Image>
                            </View>
                        </TouchableWithoutFeedback> :
                        <TouchableWithoutFeedback onPress={() => this.props.leftEvent ? this.props.leftEvent() : {}}>
                            < View style={[base.rowCC, styles.btnBox]}>
                                <Image
                                    style={styles.btnIcon}
                                    source={this.props.leftIcon}
                                    resizeMode={'contain'}
                                >
                                    {
                                        this.props.leftPoint ? <View style={styles.point}/> : <View/>
                                    }
                                </Image>
                            </View>
                        </TouchableWithoutFeedback>
                }
                <TouchableWithoutFeedback
                    onPress={() => this.props.titleEvent ? this.props.titleEvent() : {}}>
                    <View style={[base.rowCC, styles.titleBox]}>
                        <Text allowFontScaling={false} ref="nav_bar_title" style={styles.title}>{this.props.title}</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback
                    onPress={() => this.props.rightEvent ? this.props.rightEvent() : {}}>
                    <View style={[base.rowCC, styles.btnBox]}>
                        <Image
                            style={styles.btnIcon}
                            source={this.props.rightIcon}
                            resizeMode={'contain'}
                        >
                            {
                                this.props.rightPoint ? <View style={styles.point}/> : <View/>
                            }
                        </Image>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: layout.MAX_WIDTH,
        height: layout.STATUS_BAR_HEIGHT + layout.NAV_BAR_HEIGHT,
        paddingTop: layout.STATUS_BAR_HEIGHT,
        backgroundColor: layout.MAIN_AUX_COLOR
    },
    btnBox: {
        alignSelf: 'stretch',
        width: layout.NAV_BAR_HEIGHT
    },
    btnIcon: {
        width: layout.width(50),
        height: layout.height(50),
    },
    titleBox: {
        flex: 1,
    },
    title: {
        color: layout.MAIN_COLOR,
        fontSize: layout.font(34)
    },
    point: {
        position: 'absolute',
        right: 0,
        top: 0,
        width: layout.width(14),
        height: layout.height(14),
        borderRadius: layout.width(7),
        backgroundColor: '#FF3C4B'
    }
})